<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/jquery-1.11.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <style>
        /*重置*/
        html,body,ul,ul li{margin: 0;padding: 0;border:0;}
        ul{list-style: none;}
        a{text-decoration: none;}
        img{max-width: 100%;}
        /*布局*/
        .contents{
            position: relative;
        }
        .header{
            height: 43px;
            background: url(/static/constant_image/heise.png) center no-repeat;
        }
        .bodyer{
            background: url(/static/constant_image/baise.png) center no-repeat;
            height: 1462px;
        }
        .SportsLogo{
            font-size: 48px;
            font-family: "Impact";
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -550px;
            margin-top: -700px;
        }

        .tubiao{
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -530px;
            margin-top: -640px;
        }
        .store{
            font-size: 14px;
            font-family: Arial;
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -635px;
            margin-left: -500px;
        }
        .inp{
            width: 182px;
            height: 25px;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: 300px;
            margin-top: -683px;
        }
        .search{
            color: gray;
            background-color: #fff;
            border: 1px solid gray;
            height: 25px;
            width: 25px;
            padding-top: 3px;
            padding-left: 3px;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: 275px;
            margin-top: -683px;
        }
        .search1{
            width: 68px;
            height: 25px;
            background-color: #343434;
            font-size: 12px;
            color: white;
            border: 1px solid black;
        }
        .search2{
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: 483px;
            margin-top: -683px;
        }
        .navs{
            width: 440px;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: 150px;
            margin-top: -640px;
        }
        .langusges{
            width: 80px;
            height: 50px;
            background-color: white;
            border: 1px solid gray;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: 390px;
            margin-top: -620px;
            text-align: center;
            display: none;
            z-index: 2;
        }
        .country{
            width: 80px;
            height: 50px;
            background-color: white;
            border: 1px solid gray;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: 480px;
            margin-top: -620px;
            text-align: center;
            display: none;
            z-index: 2;
        }
        .cart{
            font-size: 12px;
            font-family: Arial;
            position:absolute;
            top:50%;
            left: 50%;
            margin-left: 440px;
            margin-top: -610px;
        }
        .gouwu{
            position:absolute;
            top:50%;
            left: 50%;
            margin-left: 535px;
            margin-top: -613px;
        }
        .heng{
            position:absolute;
            top:50%;
            left: 50%;
            margin-left: -550px;
            margin-top: -580px;
            width: 1440px;
        }
        .gouwukuang{
            position: absolute;
            z-index: 2;
            top:50%;
            left: 50%;
            margin-left: 280px;
            margin-top: -580px;
            display: none;
        }
        .imgs-div{width: 2250px}
        .imgs-div img{float: left}
        .imgs-div:after{content: " ";display: table;clear: both}

        .imgs-nav-div{
            background-color: #c0c0c0;
            width: 450px;
            position: absolute;
            top:50%;
            left: 50%;
            margin-left: -550px;
            margin-top: -55px;
        }
        .imgs-nav-div img{
            width: 68px;height: 88px;float: left;margin: 3px;
        }
        .imgs-nav-div button{
            width: 28px;height: 88px;float: left;margin: 5px;
        }
        .zongse{
            border: 2px solid #b66f29;
        }
        .heise{
            border: 2px solid black;
        }
        .hongse{
            border: 2px solid #ea2523;
        }
        .luse{
            border: 2px solid #1c7007;
        }
        .huise{
            border: 2px solid #636363;
        }
        .addtocart{
            border: 2px solid black;border-radius: 3px
        }
        .rating{
            border-top: 1px solid gray;
            border-left: 1px solid gray;
            border-right: 1px solid gray;
        }
        .ratings{
            color: #c0c0c0;
        }
        .ratingss{
            color: black;
        }
        .description{
            border-top: 1px solid gray;border-left: 1px solid gray;border-right: 1px solid gray
        }
        .descriptionss{
            color: black;
        }
        .descriptions{
            color: #c0c0c0;
        }
        .find{
            color: #c0c0c0;
        }
        .finds{
            border-top: 1px solid gray;border-left: 1px solid gray;border-right: 1px solid gray;
        }
        .findss{
            color: black;
        }
    </style>
</head>
<body>
<div class="contents">
    <div class="header"></div>
    <div class="bodyer">
        <div class="SportsLogo">SportsLogo</div>
        <div><img src="/static/constant_image/tubiao.png" alt="" class="tubiao"></div>
        <div class="store">Ecommerce Store</div>
        <div><input type="text" class="inp" placeholder="search"></div>
        <div class="glyphicon glyphicon-search search"></div>
        <div class="search2"><button class="search1">Search</button></div>
        <div class="navs">
            <span style="font-size: 12px;font-family: Arial;">Sign&nbsp;&nbsp;In&nbsp;&nbsp;|&nbsp;&nbsp;Register&nbsp;&nbsp;|&nbsp;&nbsp;My&nbsp;&nbsp;Account&nbsp;&nbsp;|</span>
            <span style="font-size: 12px;font-family: Arial;" onclick="f()"><a href="" style="text-decoration: none;color: black" onclick="return false;">&nbsp;&nbsp;Language: <span style="color: #f8a21c;" id="e">English</span>&nbsp;∨</a></span>
            <span style="font-size: 12px;font-family: Arial;" onclick="c()"><a href="" style="text-decoration: none;color: black" onclick="return false;">&nbsp;&nbsp;Country: <span style="color: #f8a21c" id="u">US</span>&nbsp;∨</a></span>
        </div>
        <div class="langusges">
            <div style="margin-top: 5px"><a id="english" href="" style="color: black;text-decoration: none" onclick="return false;">English</a></div>
            <div><a id="chinese" href="" style="color: black;text-decoration: none" onclick="return false;">Chinese</a></div>
        </div>
        <div class="country">
            <div style="margin-top: 5px"><a id="china" href="" style="color: black;text-decoration: none" onclick="return false;">China</a></div>
            <div><a id="american" href="" style="color: black;text-decoration: none" onclick="return false;">US</a></div>
        </div>
        <div class="cart">Checkout&nbsp;&nbsp;|&nbsp;&nbsp;Cart </div>
        <div class="gouwu"><img src="/static/constant_image/gouwu.png" alt=""></div>
        <div class="heng">
            <div style="width: 114px;height: 42px;background:url(/static/constant_image/heng.jpg);font-family: Arial;font-size: 16px;line-height: 42px;text-align: center;float: left;" id="mc"><a id="mc1" href="" style="text-decoration: none;color: white;" onclick="return false;">Men Clothing</a></div>
            <div style="width: 144px;height: 42px;background:url(/static/constant_image/heng.jpg);font-family: Arial;font-size: 16px;line-height: 42px;text-align: center;float: left;" id="wc"><a id="wc1" href="" style="text-decoration: none;color: white;" onclick="return false;">Women Clothing</a></div>
            <div style="width: 100px;height: 42px;background:url(/static/constant_image/heng.jpg);font-family: Arial;font-size: 16px;line-height: 42px;text-align: center;float: left;" id="ms"><a id="ms1" href="" style="text-decoration: none;color: white;" onclick="return false;">Men Shoes</a></div>
            <div style="width: 121px;height: 42px;background:url(/static/constant_image/heng.jpg);font-family: Arial;font-size: 16px;line-height: 42px;text-align: center;float: left;" id="ws"><a id="ws1" href="" style="text-decoration: none;color: white;" onclick="return false;">Women Shoes</a></div>
            <div style="width: 103px;height: 42px;background:url(/static/constant_image/heng.jpg);font-family: Arial;font-size: 16px;line-height: 42px;text-align: center;float: left;" id="kc"><a id="kc1" href="" style="text-decoration: none;color: white;" onclick="return false;">Kid Clothing</a></div>
            <div style="width: 90px;height: 42px;background:url(/static/constant_image/heng.jpg);font-family: Arial;font-size: 16px;line-height: 42px;text-align: center;float: left;" id="ks"><a id="ks1" href="" style="text-decoration: none;color: white;" onclick="return false;">Kid Shoes</a></div>
            <div style="width: 430px;height: 42px;background:url(/static/constant_image/heng.jpg);float: left"></div>
        </div>

        <div style="width: 150px;height: 135px;background-color:#9b9b9b;position: absolute;top: 50%;left: 50%;margin-top: -540px;margin-left: -550px;display: none;z-index: 2" id="xiala1">
            <div style="height: 28px;"></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wq1"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women coat</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wq2"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women jacket</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wq3"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women pants</a></div>
        </div>

        <div style="width: 150px;height: 135px;background-color:#9b9b9b;position: absolute;top: 50%;left: 50%;margin-top: -540px;margin-left: -440px;display: none;z-index: 2" id="xiala2">
            <div style="height: 28px;"></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="ww1"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women coat</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="ww2"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women jacket</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="ww3"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women pants</a></div>
        </div>

        <div style="width: 150px;height: 135px;background-color:#9b9b9b;position: absolute;top: 50%;left: 50%;margin-top: -540px;margin-left: -290px;display: none;z-index: 2" id="xiala3">
            <div style="height: 28px;"></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="we1"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women coat</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="we2"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women jacket</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="we3"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women pants</a></div>
        </div>

        <div style="width: 150px;height: 135px;background-color:#9b9b9b;position: absolute;top: 50%;left: 50%;margin-top: -540px;margin-left: -200px;display: none;z-index: 2" id="xiala4">
            <div style="height: 28px;"></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wr1"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women coat</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wr2"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women jacket</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wr3"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women pants</a></div>
        </div>

        <div style="width: 150px;height: 135px;background-color:#9b9b9b;position: absolute;top: 50%;left: 50%;margin-top: -540px;margin-left: -80px;display: none;z-index: 2" id="xiala5">
            <div style="height: 28px;"></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wt1"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women coat</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wt2"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women jacket</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wt3"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women pants</a></div>
        </div>

        <div style="width: 150px;height: 135px;background-color:#9b9b9b;position: absolute;top: 50%;left: 50%;margin-top: -540px;margin-left: 30px;display: none;z-index: 2" id="xiala6">
            <div style="height: 28px;"></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wy1"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women coat</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wy2"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women jacket</a></div>
            <div style="font-size: 15px;font-family: Arial;height: 28px;line-height: 28px;text-align: center" id="wy3"><a href="" style="text-decoration: none;color: white;" onclick="return false;">Women pants</a></div>
        </div>

        <div class="gouwukuang"><img src="/static/constant_image/gouwukuang.png" alt="">
            <div><img src="/static/constant_image/heiseyifu.png" alt="" style="width: 80px;height: 93px;z-index: 2;position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px"></div>
            <div style="font-size: 14px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: -100px;z-index: 2">Sports Skirt</div>
            <div style="font-size: 11px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: -75px;z-index: 2">SKU: 0055</div>
            <div style="font-size: 11px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: -55px;z-index: 2">Availability: In Stock</div>
            <div style="color: #f8a21c;font-size: 18px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: -35px;z-index: 2">$127.99</div>
            <div><img src="/static/constant_image/hongse.png" alt="" style="width: 80px;height: 93px;z-index: 2;position: absolute;top: 50%;left: 50%;margin-left: -100px;margin-top: 20px"></div>
            <div style="font-size: 14px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: 20px;z-index: 2">Sports Skirt</div>
            <div style="font-size: 11px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: 45px;z-index: 2">SKU: 0055</div>
            <div style="font-size: 11px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: 65px;z-index: 2">Availability: In Stock</div>
            <div style="color: #f8a21c;font-size: 18px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: 0px;margin-top: 90px;z-index: 2">$127.99</div>
        </div>

        <div class="view-div" style="width: 450px;height: 450px;border: 1px solid gray;position: absolute;top: 50%;left: 50%;margin-top: -510px;margin-left: -550px;overflow-y: hidden;overflow-x: hidden">
            <div class="imgs-div">
                <img src="/static/constant_image/zongse.png" alt="" style="width: 450px;height: 450px" id="zongsemodel">
                <img src="/static/constant_image/heiseyifu.png" alt="" style="width: 450px;height: 450px">
                <img src="/static/constant_image/hongse.png" alt="" style="width: 450px;height: 450px">
                <img src="/static/constant_image/luse.png" alt="" style="width: 450px;height: 450px">
                <img src="/static/constant_image/huise.png" alt="" style="width: 450px;height: 450px">
            </div>
        </div>
        <div class="imgs-nav-div">
            <button style="font-size: 30px;" id="left"><</button>
            <img src="/static/constant_image/zongse.png" alt="" >
            <img src="/static/constant_image/heiseyifu.png" alt="" >
            <img src="/static/constant_image/hongse.png" alt="" >
            <img src="/static/constant_image/luse.png" alt="" >
            <img src="/static/constant_image/huise.png" alt="" >
            <button style="font-size: 30px;" id="right">></button>
        </div>
        <div style="font-size: 22px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -510px">Sports skirt</div>
        <div style="position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -470px">
            <div style="font-family: Myriad Pro;font-size: 14px">SKU:0055</div>
            <div style="font-family: Myriad Pro;font-size: 14px">Availability: In Stock</div>
            <div style="color: #f8a21c;font-size: 22px;font-family: Myriad Pro;margin-top: 20px">$127.99</div>
            <div style="border-bottom: 1px solid gray;width: 600px;margin-top: 20px"></div>
            <div style="font-size: 12px;font-family: Arial;margin-top: 20px">
                Cut full for style and comfort, the 560 is built for lots of body types.<br/>
                Light and packable the fabric sits off the skin for comfort and breathability and is treated with a<br/>
                special finish for added water repellency. Articulated knees and 2-way stretch provide nataural<br/>
                fit and movement while snap-adjustable cuffs button tight for ang occasion.<br/>
            </div>
            <div style="border-bottom: 1px solid gray;width: 600px;margin-top: 20px"></div>
            <div style="margin-top: 20px">
                <span style="font-size: 14px;font-family: Arial;">Step-1: Size-</span>
                <span><input type="text" style="height: 30px;margin-left: 10px" placeholder="Size" id="sizeinput"></span>
            </div>
            <div style="margin-top: 23px">
                <span style="font-size: 14px;font-family: Arial;">Step-2: Colors - </span>
            </div>
            <div style="margin-top: 23px">
                <span style="font-size: 14px;font-family: Arial;">Step-3: Quantity - </span>
                <input type="number" style="width: 50px">
            </div>
            <div style="margin-top: 25px;width: 195px;height: 48px;" class="" id="add">
                <button style="width: 186px;height: 40px;color: white;font-size: 25px;background:url(/static/constant_image/addtocart.png);border: 1px;margin: 2px;font-family: Impact" >ADD TO CART</button>
            </div>
        </div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 100px;margin-left: -530px">
            <div style="display: inline-block;font-size: 14px;font-family: Arial;width: 103px;height: 40px;text-align: center;line-height: 40px;margin-left: -20px;" class="description descriptionss" id="description">Description</div>

            <div style="display: inline-block;width: 200px;height: 40px;text-align: center;line-height: 40px;font-size: 14px;font-family: Arial;" class="ratings" id="rating">Rating & Review</div>

            <div style="display: inline-block;font-size: 14px;font-family: Arial;width: 103px;height: 40px;text-align: center;line-height: 40px;" class="find" id="find">Find in Store</div>

            <div style="font-size: 12px;font-family: Arial;height: 167px;width: 1100px;border: 1px solid gray;padding: 10px;margin-left: -20px" id="wenben">
                11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            </div>
        </div>
        <div><img src="/static/constant_image/huibai.png" alt="" style="position: absolute;top: 50%;left: 50%;margin-top: 330px;margin-left: -550px;width: 1100px"></div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 390px;margin-left: -550px">
            <div style="font-size: 16px;font-family: Arial;display: inline-block">Sign Up For ACS Email:</div>
            <div style="display: inline-block"><input type="text" placeholder="Enter your email"></div>
            <div style="display: inline-block;margin-left: -3px"><button style="height: 26px;width: 73px;border: 1px;background: #343434;color: white">Sign Up</button></div>
        </div>
        <div style="width: 1100px;border-bottom: 1px solid gray;position: absolute;top: 50%;left: 50%;margin-left: -550px;margin-top: 440px"></div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 450px;margin-left: -550px">
            <div style="font-size: 14px;font-family: '方正粗黑宋简体';padding: 5px">Our Offers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">New products</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Top sellers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Specials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Manufacturers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">SuppliersSpecials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Customer Service</div>
        </div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 450px;margin-left: -330px">
            <div style="font-size: 14px;font-family: '方正粗黑宋简体';padding: 5px">Shipping Info</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">New products</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Top sellers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Specials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Manufacturers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">SuppliersSpecials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Customer Service</div>
        </div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 450px;margin-left: -130px">
            <div style="font-size: 14px;font-family: '方正粗黑宋简体';padding: 5px">Customer Service</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">New products</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Top sellers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Specials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Manufacturers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">SuppliersSpecials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Customer Service</div>
        </div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 450px;margin-left: 100px">
            <div style="font-size: 14px;font-family: '方正粗黑宋简体';padding: 5px">Privacy & Legal</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">New products</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Top sellers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Specials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Manufacturers</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">SuppliersSpecials</div>
            <div style="font-size: 11px;font-family: Arial;padding: 5px">Customer Service</div>
        </div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 450px;margin-left: 350px">
            <div style="font-size: 14px;font-family: '方正粗黑宋简体';padding: 5px">Twitter</div>
        </div>
        <div style="position: absolute;top: 50%;left: 50%;margin-top: 480px;margin-left: 360px">
            <img src="/static/constant_image/f.png" alt="" >
            <img src="/static/constant_image/t.png" alt="" style="margin-left: 10px">
            <img src="/static/constant_image/y.png" alt="" style="margin-left: 10px">
        </div>
        <div style="width: 1100px;border-bottom: 1px solid gray;position: absolute;top: 50%;left: 50%;margin-left: -550px;margin-top: 650px"></div>
        <div style="font-size: 12px;font-family: Arial;position: absolute;top: 50%;left: 50%;margin-top: 670px;margin-left: -550px">Home   |   Site Map   |   Store Locator   |   About Us   |   Contact Us</div>
        <div style="font-size: 12px;font-family: Arial;color: #999999;position: absolute;top: 50%;left: 50%;margin-top: 700px;margin-left: -550px">(C) 2013 AAXIS Commerce</div>
    </div>


        <div style="position: absolute;top: 50%;left: 50%;margin-left:80px ;margin-top: -180px;width: 300px;height: 50px" >
            <div  style="display: inline-block;width: 26px;height: 25px;" class="" id="zongse">
                <div style="width: 17px;height: 17px;background-color: #b66f29;margin: 2.5px;"></div>
            </div>
            <div  style="display: inline-block;margin-left: 10px;width: 26px;height: 25px;" class="" id="heise" >
                <div style="width: 17px;height: 17px;background-color: black;margin: 2.5px;"></div>
            </div>
            <div class="" id="hongse" style="display: inline-block;margin-left: 10px;width: 26px;height: 25px;">
                <div style="width: 17px;height: 17px;background-color: #ea2523;margin: 2.5px"></div>
            </div>
            <div class="" id="luse" style="display: inline-block;margin-left: 10px;width: 26px;height: 25px;">
                <div style="width: 17px;height: 17px;background-color: #1c7007;margin: 2.5px"></div>
            </div>
            <div class="" id="huise" style="display: inline-block;margin-left: 10px;width: 26px;height: 25px;">
                <div style="width: 17px;height: 17px;background-color: #636363;margin: 2.5px"></div>
            </div>
        </div>
        <button style="background-color: #f8a21c;color: white;border: 1px solid;position: absolute;top: 50%;left: 50%;margin-left: 195px;margin-top: -227px" id="sizebutton">∨</button>
        <div style="width: 179px;height: 100px;border-bottom: 1px solid gray;border-left:1px solid gray;border-right:1px solid gray;margin-left: 45px;background-color: #fff;margin-top: -205px;z-index: 2;position: absolute;top: 50%;left: 50%;display: none" id="sizebuttons">
            <div style="text-align: center;" id="sizem"><a href="" style="color: black;text-decoration: none;" onclick="return false;">M</a></div>
            <div style="text-align: center;" id="sizes"><a href="" style="color: black;text-decoration: none;" onclick="return false;">S</a></div>
            <div style="text-align: center;" id="sizel"><a href="" style="color: black;text-decoration: none;" onclick="return false;">L</a></div>
            <div style="text-align: center;" id="sizexxl"><a href="" style="color: black;text-decoration: none;" onclick="return false;">XXL</a></div>
        </div>
        <div style="width: 101px;height: 10px;background-color: white;position: absolute;top: 50%;left: 50%;margin-left: -549px;margin-top: 135px;" id="one"></div>
        <div style="width: 198px;height: 10px;background-color: white;position: absolute;top: 50%;left: 50%;margin-left: -442px;margin-top: 135px;display: none" id="two"></div>
        <div style="width: 101px;height: 10px;background-color: white;position: absolute;top: 50%;left: 50%;margin-left: -239px;margin-top: 135px;display: none" id="there"></div>
    </div>

<script>
    var langusges=$('.langusges');
    var english=$('#english');
    var chinese=$('#chinese');
    var e=$('#e');

    var country=$('.country');
    var china=$('#china');
    var american=$('#american');
    var u=$('#u');

    var viewDiv=$('.view-div');
    var imgs=$('.view-div img');
    var  index=0;

    function f(){
        langusges.toggle();
    }
    function c(){
        country.toggle();
    }
    english.hover(function(){
       $(this).css({color:"#f8a21c"});
    },function(){
        $(this).css({color:"black"});
    });
    english.click(function(){
        e.html(english.html());
        langusges.hide();
    });
    chinese.hover(function(){
        $(this).css({color:"#f8a21c"});
    },function(){
        $(this).css({color:"black"});
    });
    chinese.click(function(){
        e.html(chinese.html());
        langusges.hide();
    });
    china.hover(function(){
        $(this).css({color:"#f8a21c"});
    },function(){
        $(this).css({color:"black"});
    });
    china.click(function(){
        u.html(china.html());
        country.hide();
    });
    american.hover(function(){
        $(this).css({color:"#f8a21c"});
    },function(){
        $(this).css({color:"black"});
    });
    american.click(function () {
        u.html(american.html());
        country.hide();
    });
    $('#mc').click(function(){
        $('#mc').css({background:"url(/static/constant_image/duanheng.jpg)"});
        $('#mc1').css({color:"#f8a21c"});
        $('#wc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#wc1').css({color:"white"});
        $('#ms').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ms1').css({color:"white"});
        $('#ws').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ws1').css({color:"white"});
        $('#kc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#kc1').css({color:"white"});
        $('#ks').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ks1').css({color:"white"});
        $('#xiala1').toggle();
        $('#xiala2').hide();
        $('#xiala3').hide();
        $('#xiala4').hide();
        $('#xiala5').hide();
        $('#xiala6').hide();
    });
    $('#wc').click(function(){
        $('#wc').css({background:"url(/static/constant_image/duanheng.jpg)"});
        $('#wc1').css({color:"#f8a21c"});
        $('#mc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#mc1').css({color:"white"});
        $('#ms').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ms1').css({color:"white"});
        $('#ws').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ws1').css({color:"white"});
        $('#kc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#kc1').css({color:"white"});
        $('#ks').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ks1').css({color:"white"});
        $('#xiala2').toggle();
        $('#xiala1').hide();
        $('#xiala3').hide();
        $('#xiala4').hide();
        $('#xiala5').hide();
        $('#xiala6').hide();
    });
    $('#ms').click(function(){
        $('#ms').css({background:"url(/static/constant_image/duanheng.jpg)"});
        $('#ms1').css({color:"#f8a21c"});
        $('#mc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#mc1').css({color:"white"});
        $('#wc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#wc1').css({color:"white"});
        $('#ws').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ws1').css({color:"white"});
        $('#kc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#kc1').css({color:"white"});
        $('#ks').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ks1').css({color:"white"});
        $('#xiala3').toggle();
        $('#xiala2').hide();
        $('#xiala1').hide();
        $('#xiala4').hide();
        $('#xiala5').hide();
        $('#xiala6').hide();

    });
    $('#ws').click(function(){
        $('#ws').css({background:"url(/static/constant_image/duanheng.jpg)"});
        $('#ws1').css({color:"#f8a21c"});
        $('#mc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#mc1').css({color:"white"});
        $('#wc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#wc1').css({color:"white"});
        $('#ms').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ms1').css({color:"white"});
        $('#kc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#kc1').css({color:"white"});
        $('#ks').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ks1').css({color:"white"});
        $('#xiala4').toggle();
        $('#xiala3').hide();
        $('#xiala2').hide();
        $('#xiala1').hide();
        $('#xiala5').hide();
        $('#xiala6').hide();
    });
    $('#kc').click(function(){
        $('#kc').css({background:"url(/static/constant_image/duanheng.jpg)"});
        $('#kc1').css({color:"#f8a21c"});
        $('#mc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#mc1').css({color:"white"});
        $('#wc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#wc1').css({color:"white"});
        $('#ms').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ms1').css({color:"white"});
        $('#ws').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ws1').css({color:"white"});
        $('#ks').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ks1').css({color:"white"});
        $('#xiala5').toggle();
        $('#xiala4').hide();
        $('#xiala3').hide();
        $('#xiala2').hide();
        $('#xiala1').hide();
        $('#xiala6').hide();
    });
    $('#ks').click(function(){
        $('#ks').css({background:"url(/static/constant_image/duanheng.jpg)"});
        $('#ks1').css({color:"#f8a21c"});
        $('#mc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#mc1').css({color:"white"});
        $('#wc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#wc1').css({color:"white"});
        $('#ms').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ms1').css({color:"white"});
        $('#ws').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#ws1').css({color:"white"});
        $('#kc').css({background:"url(/static/constant_image/heng.jpg)"});
        $('#kc1').css({color:"white"});
        $('#xiala6').toggle();
        $('#xiala5').hide();
        $('#xiala4').hide();
        $('#xiala3').hide();
        $('#xiala2').hide();
        $('#xiala1').hide();
    });

    $('.gouwu').click(function(){
        $('.gouwukuang').toggle();
    });
    $('#wq1,#ww1,#we1,#wr1,#wt1,#wy1').hover(function(){
        $(this).css({backgroundColor:"#f8a21c"})
    },function(){
        $(this).css({backgroundColor:"#9b9b9b"})
    });
    $('#wq2,#ww2,#we2,#wr2,#wt2,#wy2').hover(function(){
        $(this).css({backgroundColor:"#f8a21c"})
    },function(){
        $(this).css({backgroundColor:"#9b9b9b"})
    });
    $('#wq3,#ww3,#we3,#wr3,#wt3,#wy3').hover(function(){
        $(this).css({backgroundColor:"#f8a21c"})
    },function(){
        $(this).css({backgroundColor:"#9b9b9b"})
    });

    setInterval(function(){
        index=++index%imgs.length;
        viewDiv.animate({scrollLeft:index*450});
    },3000);

    $('.imgs-nav-div img').click(function(){
        var aa=$(this).index()-1;
        viewDiv.animate({scrollLeft:aa*450});
    });

    $('#left').click(function(){
        index=(--index+5)%imgs.length;
        viewDiv.animate({scrollLeft:index*450});
    });
    $("#right").click(function(){
        index=++index%imgs.length;
        viewDiv.animate({scrollLeft:index*450});
    });

    $('#sizebutton').click(function(){
        $('#sizebuttons').toggle();
    });

    $('#sizem').hover(function(){
        $('#sizem').css({backgroundColor:"#f8a21c"})
    },function(){
        $('#sizem').css({backgroundColor:"white"})
    }).click(function(){
        $('#sizeinput').val($('#sizem').text());
        $('#sizebuttons').hide();
    });

    $('#sizes').hover(function(){
        $('#sizes').css({backgroundColor:"#f8a21c"})
    },function(){
        $('#sizes').css({backgroundColor:"white"})
    }).click(function(){
        $('#sizeinput').val($('#sizes').text());
        $('#sizebuttons').hide();
    });

    $('#sizel').hover(function(){
        $('#sizel').css({backgroundColor:"#f8a21c"})
    },function(){
        $('#sizel').css({backgroundColor:"white"})
    }).click(function(){
        $('#sizeinput').val($('#sizel').text());
        $('#sizebuttons').hide();
    });

    $('#sizexxl').hover(function(){
        $('#sizexxl').css({backgroundColor:"#f8a21c"})
    },function(){
        $('#sizexxl').css({backgroundColor:"white"})
    }).click(function(){
        $('#sizeinput').val($('#sizexxl').text());
        $('#sizebuttons').hide();
    });

    $('#zongse').click(function(){
        $('#zongse').addClass('zongse');
        $('#heise').removeClass('heise');
        $('#hongse').removeClass('hongse');
        $('#luse').removeClass('luse');
        $('#huise').removeClass('huise');
    });
    $('#heise').click(function(){
        $('#heise').addClass('heise');
        $('#zongse').removeClass('zongse');
        $('#hongse').removeClass('hongse');
        $('#luse').removeClass('luse');
        $('#huise').removeClass('huise');
    });
    $('#hongse').click(function(){
        $('#hongse').addClass('hongse');
        $('#heise').removeClass('heise');
        $('#zongse').removeClass('zongse');
        $('#luse').removeClass('luse');
        $('#huise').removeClass('huise');
    });
    $('#luse').click(function(){
        $('#luse').addClass('luse');
        $('#hongse').removeClass('hongse');
        $('#heise').removeClass('heise');
        $('#zongse').removeClass('zongse');
        $('#huise').removeClass('huise');
    });
    $('#huise').click(function(){
        $('#huise').addClass('huise');
        $('#luse').removeClass('luse');
        $('#hongse').removeClass('hongse');
        $('#heise').removeClass('heise');
        $('#zongse').removeClass('zongse');
    });
    $('#add').click(function(){
        $('#add').addClass('addtocart');
    });

    $('#rating').click(function(){
        $(this).removeClass('ratings');
        $(this).addClass('ratingss');
        $(this).addClass('rating');
        $('#two').show();

        $('#description').removeClass('description').removeClass('descriptionss').addClass('descriptions');
        $('#one').hide();
        $('#find').removeClass('finds').removeClass('findss').addClass('find');
        $('#there').hide();
        $('#wenben').text('222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
    });
    $('#description').click(function(){
        $(this).removeClass('descriptions');
        $(this).addClass('description');
        $(this).addClass('descriptionss');
        $('#one').show();

        $('#rating').removeClass('ratingss').removeClass('rating').addClass('ratings');
        $('#two').hide();
        $('#find').removeClass('finds').removeClass('findss').addClass('find');
        $('#there').hide();
        $('#wenben').text('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
    });
    $('#find').click(function(){
        $(this).removeClass('find');
        $(this).addClass('finds');
        $(this).addClass('findss');
        $('#there').show();

        $('#description').removeClass('description').removeClass('descriptionss').addClass('descriptions');
        $('#one').hide();
        $('#rating').removeClass('rating').removeClass('ratingss').addClass('ratings');
        $('#two').hide();
        $('#wenben').text('333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333');
    });
    $('#zongsemodel').click(function(){
        console.log(123);
    });
</script>
</body>
</html>